{% extends "base/basic.html" %}
{% block breadcrumb %}
    <li>角色管理</li>
{% endblock %}
{% block page_header %}
    <div class="row">
        <div class="col-md-4">
            <button class="button btn-corner btn-primary btn-lg"
                    onclick="add()">
                <span class="glyphicon glyphicon-plus"></span>添加</button>
        </div>
    </div>
{% endblock %}
{% block page_content %}
    <table class="table table-bordered table-responsive">
        <thead class="table-header">
            <th class="text-center" width="5%"><input id="all_" class="" onclick="check_all(this)" type="checkbox"></th>
            <th width="20%">角色名称</th>
            <th width="20%">角色代码</th>
            <th class="text-center">操作</th>
        </thead>
        <tbody>
            {% if  objects %}
                {% for obj in objects %}
                    <tr>
                        <td class="text-center">
                            <input name="obj_checkbox" onclick="check()" type="checkbox" value="{{ obj.id }}">
                        </td>
                        <td>{{ obj.name }}</td>
                        <td>{{ obj.code }}</td>
                        <td>
                            <a class="button btn-mini btn-danger glyphicon glyphicon-trash" onclick="del({{ obj.id }})"></a>
                            <a class="button btn-mini btn-info glyphicon glyphicon-edit"
                               onclick="edit({{ obj|to_json }})"></a>
                        </td>
                    </tr>
                {% endfor %}
                <tr>
                    <td colspan="4">
                        <button class="button btn-danger btn-sm">批量删除</button>
                    </td>
                </tr>

                {% else %}
                <tr>
                    <td colspan="4">暂无数据</td>
                </tr>
            {% endif %}
        </tbody>
    </table>

    <!-- 模态框 -->
<div class="modal fade"
     tabindex="-1" role="dialog"
     id="edit_dialog"
     aria-labelledby="mySmallModalLabel">
  <div class="modal-dialog modal-large " role="document">
    <div class="modal-content">
        {% include 'role/edit.html' %}
    </div>
  </div>
</div>
    <div id="del_dialog" class="hidden">
        <p class="text-danger">
            是否执行删除操作？
        </p>
        <p>
            <button class="button btn-primary">确认</button>
        </p>
    </div>

{% endblock %}

{% block js %}
<script>
 function del(obj_id){
     {#$('#del_dialog').removeClass('hidden')#}
     {#$('#del_dialog').dialog()#}
    if(confirm('是否删除')){
        $.ajax('/role/?id='+obj_id,{
            method: 'delete',
            success: function (ret) {
                // 刷新页面
                window.open('/role/', target='_self')
            }
        })
    }
 }
 function clear() {
    $('.modal-title').html('添加角色')
     $('input[name="name"]').val('')
     $('input[name="code"]').val('')
     $('input[name="id"]').val('')
 }
 function add() {
     clear()
     $('#edit_dialog').modal('show')
 }

 function submit() {
    $('#edit_form').submit()

 }
 function edit(obj) {
     console.info(obj)
     $('.modal-title').html('编辑角色')

      $('input[name="name"]').val(obj.name)
      $('input[name="code"]').val(obj.code)
     $('input[name="id"]').val(obj.id)
     $('#edit_dialog').modal('show')
 }
 function check() {
     var flag = true
     $('[name="obj_checkbox"]').each(function (i, cb_) {
         if(!cb_.checked) flag = false
     })
     $("#all_")[0].checked = flag
 }
 function check_all(cb){
      $('[name="obj_checkbox"]').each(function (i, cb_) {
            cb_.checked = cb.checked
      })
 }
</script>
{% endblock %}